<template>
  <div class="mainIcon">
    <ul class="mainUi">
      <li v-for="(item,index) of dataInfo" :key="index">
        <div>
          <img :src="item.src" alt="">
        </div>
        <h5>{{item.inforTit}}</h5>
        <p>{{item.infoTip}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name:'MainIcon', 
  data () {
    return {
      dataInfo:[
        {
          src:'/static/image/icon-1.png',
          inforTit:'免费入驻平台',
          infoTip:'商家、买手入驻平台不收取任何费用'
        },
        {
          src:'/static/image/icon-1.png',
          inforTit:'免费入驻平台',
          infoTip:'商家、买手入驻平台不收取任何费用'
        },
        {
          src:'/static/image/icon-1.png',
          inforTit:'免费入驻平台',
          infoTip:'商家、买手入驻平台不收取任何费用'
        },
        {
          src:'/static/image/icon-1.png',
          inforTit:'免费入驻平台',
          infoTip:'商家、买手入驻平台不收取任何费用'
        },
        {
          src:'/static/image/icon-1.png',
          inforTit:'免费入驻平台',
          infoTip:'商家、买手入驻平台不收取任何费用'
        },
        {
          src:'/static/image/icon-1.png',
          inforTit:'免费入驻平台',
          infoTip:'商家、买手入驻平台不收取任何费用'
        },
        {
          src:'/static/image/icon-1.png',
          inforTit:'免费入驻平台',
          infoTip:'商家、买手入驻平台不收取任何费用'
        },
        {
          src:'/static/image/icon-1.png',
          inforTit:'免费入驻平台',
          infoTip:'商家、买手入驻平台不收取任何费用'
        },
      ]
    }
  }
}
</script>
<style scoped>
.mainIcon{
  background: white;
}
.mainUi{
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.mainUi li{ 
  width: 25%;
  text-align: center;
      padding: 50px 0;
    text-align: center;
    border-radius: 3px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    cursor: pointer;
}
.mainUi li:hover{
      background: #f8f8f8;
    color: #fe6b0b;
}
.mainUi h5{
      padding: 20px 0 0;
    font-size: 22px;
}
.mainUi p{
       display: inline-block;
    padding: 10px 0 0;
    color: #666;
}
</style>